<template>
  <div>
      <t-dialog
      header="菜单详情修改"
      :visible.sync="visible"
      @confirm="onConfirm"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :draggable="true"
      :onClose="close"
      top="10px"
      width="800px"
    >
        <div slot="body">
            <div class="serial-cald">
                <div class="serial">菜单图片</div>
                <span>
                    <t-upload
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="file1"
                        @fail="handleFail"
                        theme="image"
                        accept="image/*"
                    ></t-upload>
                     <t-upload
                        v-if="file1.length != 0"
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="file2"
                        @fail="handleFail"
                        theme="image"
                        accept="image/*"
                    ></t-upload>
                     <t-upload
                        v-if="file2.length != 0"
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="file3"
                        @fail="handleFail"
                        theme="image"
                        accept="image/*"
                    ></t-upload>
                </span>
            </div>
            <div class="serial-cald">
                <div class="serial">菜单名</div>
                <t-input v-model="name" />
            </div>
             <div class="serial-cald">
                <div class="serial">是否设置为推荐分类</div>
                <span>
                   <t-radio-group :default-value="recommend" @change="onChange">
                        <t-radio value="1">是</t-radio>
                        <t-radio value="2">否</t-radio>
                    </t-radio-group>
                </span>
            </div>
            <div class="serial-cald">
                <div class="serial">选择分类</div>
                <span>
                     <t-select v-model="value2" placeholder="请选择分类">
                        <t-option v-for="item in options2" :value="item.value" :label="item.label" :key="item.value"></t-option>
                    </t-select>
                </span>
            </div>
            <div class="serial-cald">
                <div class="serial">商品规格</div>
                <span>
                    <t-checkbox-group v-model="specifications" @change="onChange2">
                        <t-checkbox value="通用">
                            <span class="originalprice" style="display: flex;align-items: center;">
                                <span class="title" style="width: 43px; margin-right:20px">通用</span>
                                <span style="width: 45px">原价¥:</span>
                                <t-input style="width: 60px;" v-model=" specificationslist.general.Generalprice" placeholder="原价"/>
                                <span style="width: 90px; margin-left: 20px; overflow: hidden;">折后价¥: {{ specificationslist.general.discountprice }}</span>
                                <span style="width: 45px;margin-left: 20px;">成本</span>
                                <t-input style="width: 54px;" placeholder="成本" v-model="specificationslist.general.cost "/>
                                <span style="width: 45px;margin-left: 20px;">备注</span>
                                <t-input style="width: 170px;" placeholder="备注" v-model="specificationslist.general.note"/>
                            </span>
                        </t-checkbox>
                        <t-checkbox style="margin-top:10px;" value="大份">
                            <span class="originalprice" style="display: flex;align-items: center;">
                                <span class="title" style="width: 43px; margin-right:20px">大份</span>
                                <span style="width: 45px">原价¥:</span>
                                <t-input style="width: 60px;" placeholder="原价" v-model="specificationslist.large.Generalprice"/>
                                <span style="width: 90px; margin-left: 20px; overflow: hidden;">折后价¥: {{ specificationslist.large.discountprice }}</span>
                                <span style="width: 45px;margin-left: 20px;">成本</span>
                                <t-input style="width: 54px;" placeholder="成本" v-model="specificationslist.large.cost"/>
                                <span style="width: 45px;margin-left: 20px;">备注</span>
                                <t-input style="width: 170px;" placeholder="备注" v-model="specificationslist.large.note"/>
                            </span>
                        </t-checkbox>
                        <t-checkbox style="margin-top:10px;" value="中份">
                            <span class="originalprice" style="display: flex;align-items: center;">
                                <span class="title" style="width: 43px; margin-right:20px">中份</span>
                                <span style="width: 45px">原价¥:</span>
                                <t-input style="width: 60px;" placeholder="原价" v-model="specificationslist.part.Generalprice"/>
                                <span style="width: 90px; margin-left: 20px; overflow: hidden;">折后价¥:  {{ specificationslist.part.discountprice }}</span>
                                <span style="width: 45px;margin-left: 20px;">成本</span>
                                <t-input style="width: 54px;" placeholder="成本" v-model="specificationslist.part.cost"/>
                                <span style="width: 45px;margin-left: 20px;">备注</span>
                                <t-input style="width: 170px;" placeholder="备注" v-model="specificationslist.part.note"/>
                            </span>
                        </t-checkbox>
                        <t-checkbox style="margin-top:10px;" value="小份">
                            <span class="originalprice" style="display: flex;align-items: center;">
                                <span class="title" style="width: 43px; margin-right:20px">小份</span>
                                <span style="width: 45px">原价¥:</span>
                                <t-input style="width: 60px;" placeholder="原价" v-model="specificationslist.Smallportion.Generalprice"/>
                                <span style="width: 90px; margin-left: 20px; overflow: hidden;">折后价¥: {{ specificationslist.Smallportion.discountprice }}</span>
                                <span style="width: 45px;margin-left: 20px;">成本</span>
                                <t-input style="width: 54px;" placeholder="成本" v-model="specificationslist.Smallportion.cost"/>
                                <span style="width: 45px;margin-left: 20px;">备注</span>
                                <t-input style="width: 170px;" placeholder="备注" v-model="specificationslist.Smallportion.note"/>
                            </span>
                        </t-checkbox>
                    </t-checkbox-group>
                </span>
            </div>
            <div class="serial-cald">
                <div class="serial">折扣(%)</div>
                <t-input style="width: 300px;" v-model.number="discount" placeholder="请输入折扣"/>
            </div>
            
            <div class="serial-cald">
                <div class="serial">库存数量</div>
                <t-input style="width: 300px;" v-model="inventory"/>
            </div>
            <div class="serial-cald">
                <div class="serial">菜单描述</div>
                <t-textarea
                    v-model="describe"
                    placeholder="请输入描述吸引客户"
                    name="description"
                />
            </div>
            <div class="serial-cald">
                <div class="serial">
                    <span>商品属性</span>
                    <t-button theme="primary" shape="round" variant="base" style="float: right;" @click="editeditor">编辑</t-button>
                </div>
                <div>
                   <div class="sweetness">
                        <span>甜度: </span>
                        <span v-for="(item,index) in sweetness" :key="index" class="label">
                            {{ item }}
                        </span>
                        <span class="custom">自定义+</span>
                   </div>
                    <div class="sweetness">
                        <span>甜度: </span>
                        <span v-for="(item,index) in sweetness" :key="index" class="label">
                            {{ item }}
                        </span>
                        <span class="custom">自定义+</span>
                   </div>
                    <div class="sweetness">
                        <span>甜度: </span>
                        <span v-for="(item,index) in sweetness" :key="index" class="label">
                            {{ item }}
                        </span>
                        <span class="custom">自定义+</span>
                   </div>
                    <div class="sweetness">
                        <span>甜度: </span>
                        <span v-for="(item,index) in sweetness" :key="index" class="label">
                            {{ item }}
                        </span>
                        <span class="custom">自定义+</span>
                   </div>
                </div>
            </div>
        </div>
    </t-dialog>
  </div>
</template>

<script>
import { Icon } from 'tdesign-icons-vue';
import { IconFont } from 'tdesign-icons-vue';

export default {
    name:'detailsdata',
    props: {
        confirmBody:{
            type: Object 
        }
    },
    comments: {
       Icon,
       IconFont
    },
    data() {
        return {
            visible: false,
            value1: ['选项一'],
            value2: '', // 选择分类
            discount: '', // 折扣
            describe: '', // 菜单描述
            inventory: '', // 库存
            file1: [],
            file2: [],
            file3: [], // 上传菜单头像
            name: '', // 菜单名
            recommend: 1, // 是否推荐 1是 2否
            specifications: [], // 商品规格
            specificationslist: {
                // 通用
                general: {
                    Generalprice: '', // 通用原价
                    discountprice: '0', // 折后价
                    cost: '', // 成本
                    note: '', // 备注
                },
                // 大份
                large : {
                     Generalprice: '', // 大份原价
                     discountprice: '0', // 折后价
                     cost: '', // 成本
                     note: '', // 备注
                },
                // 中份
                part : {
                     Generalprice: '', // 中份原价
                     discountprice: '0', // 折后价
                     cost: '', // 成本
                     note: '', // 备注
                },
                // 小份
                Smallportion : {
                     Generalprice: '', // 小份原价
                     discountprice: '0', // 折后价
                     cost: '', // 成本
                     note: '', // 备注
                }
            },
            // 甜度
            sweetness: ['七分糖', '六分糖', '五分糖', '三分糖', '无糖',],
            options2: [
                { label: '云服务器', value: '1' },
                { label: '云数据库', value: '2' },
                { label: '域名注册', value: '3' },
                { label: '网站备案', value: '4' },
                { label: '对象存储', value: '5' },
                { label: '低代码平台', value: '6' },
            ],
        };
    },
    watch: {
        // 监听折扣价进行换算
        discount () {
            // 对折扣价进行换算
            if (this.specifications.length != 0) {
                for (const key in this.specificationslist) {
                    if (this.specificationslist[key].Generalprice != '') {
                        this.specificationslist[key].discountprice = this.specificationslist[key].Generalprice / this.discount
                        this.specificationslist[key].discountprice = this.specificationslist[key].discountprice.toString().split('.')[0]
                    } 
                }
            } else {
                this.$message.error('请先选择规格')
            }
        }
    },
     methods: {
         // 属性点击删除触发的函数
         onIconClose () {

         },

        handleSelectAll(checked) {
            this.value1 = checked ? ['选项一', '选项二', '选项三'] : [];
        },

        onConfirm(context) {
            console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
            this.visible = false;
        },
        onConfirmAnother(context) {
            console.log('点击了确认按钮', context);
        },
        close(context) {
            console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
        },
        onCancel(context) {
            console.log('点击了取消按钮', context);
        },
        onKeydownEsc(context) {
            console.log('按下了ESC', context);
        },
        onClickCloseBtn(context) {
            console.log('点击了关闭按钮', context);
        },
        onClickOverlay(context) {
            console.log('点击了蒙层', context);
        },

        // 点击是否推荐触发的函数
        onChange (item) {
            // console.log(item);
            this.recommend = item
        },

        // 商品规格改变触发的函数
        onChange2 (item) {
            console.log(item);
        },

        // 编辑
        editeditor () {
            console.log('编辑');
        },

        // 图片上传触发的函数
        handleFail () {

        }
    },
}
</script>

<style lang="less">
.sweetness {
    margin-top: 10px;
    .label {
        border: 1px solid #999;
        border-radius: 4px;
        margin-left: 6px;
        text-align: center;
    }
    .custom {
        border: 1px solid #999;
        border-radius: 4px;
        margin-left: 6px;
        padding: 0 4px;
    }
}
.t-upload {
    display: inline-block;
}
.originalprice {
    display: flex;
}
.serial-cald {
    padding: 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(216, 216, 216);
    margin-bottom: 10px;
}
.serial {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
label.t-checkbox {
    display: block;
}

.t-checkbox__label {
    flex-shrink: 0;
}

.attribute-list {
    display: flex;
    .attribute-name {
        li {
            margin-top: 10px;
        }
    }
    .attribute-label {
        margin-left: 10px;
        li {
            border: 1px solid #999;
            border-radius: 4px;
            margin-top: 10px;
        }
    }
}

</style>